<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="A datavisualization tool that leads you from your data to the graphic you need." content="">
    <meta name="Yan Holtz & Conor Healy" content="">

    <title>Data to Viz</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet">

  </head>

  <body id="page-top">




    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="index.html">
          <img src="img/logo/typo.png" style="width:30%; vertical-align: top;">
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html/#treeanchor">Explore</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html#storyanchor">Story</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html#portfolioanchor">All</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html#caveatanchor">Caveats</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html#posteranchor">Poster</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html#aboutanchor">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="index.html#contactanchor">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>










<!-- ============================ Title and button ======================================================================= -->

    <section class="" id="head" style="padding-bottom: 0px">
      <div class="container">


        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">POSTER</h2>
            <h3 class="section-subheading text-muted">Support the <a href="https://www.data-to-viz.com">Data to Viz</a> project by buying a high quality poster.</h3>
            <p>
              <a class="btn btn-primary js-scroll-trigger" href="#presentation" >Presentation</a> 
              <a class="btn btn-primary js-scroll-trigger" href="#feature" >Features</a> 
              <a class="btn btn-primary js-scroll-trigger" href="#postage" >Postage</a> 
              <a class="btn btn-primary js-scroll-trigger" href="#order" >Order</a> 
            <p>
            <br>
          </div>
        </div>
        <br>
      </div>
    </section>



<!-- ============================ First image ======================================================================= -->

    <section id="presentation" class="bg-light" >
      <div class="container">

        <div class="row">
          <div class="col-lg-8 text-center">
            <img src="img/poster/poster_mockup_croped.jpg" style="width:90%">
          </div>
            <div class="col-lg-4 text-center">
              <p><a href="https://www.data-to-viz.com">From Data to Viz</a> is a project that provides several decision trees leading from a data format to a set of possible graphs.<br><br>The poster summarizes the 6 decision trees and is a useful tool for your data analytics project, or for teaching students the diversity of dataviz.</p>
              <a class="btn btn-primary btn-xl text-uppercase" data-toggle="modal" href="#poster_full">See it full screen</a>
           </div>
        </div>

      </div>
    </section>





<!-- ============================ SECOND with PARRALAX  ======================================================================= -->

    <section class="" id="feature" style="padding: 0px 0; padding-top: 0px">
      <div class="parallaxposter">
        <div class="container">
          <div class="row text-center" style="padding-top: 20%">

            <div class="col-lg-3 col-md-6 text-center">
              <h2 class="text-uppercase" style="border-bottom: solid; border-width: 1px">Size</h2>
              <p style="color: grey">Landscape<br>800mm x 600mm</p>
            </div>

            <div class="col-lg-3 col-md-6 text-center">
              <h2 class="text-uppercase"  style="border-bottom: solid; border-width: 1px">Paper</h2>
              <p style="color: grey">140g/m2<br>'Cyclus' recycled paper</p>
            </div>

            <div class="col-lg-3 col-md-6 text-center">
              <h2 class="text-uppercase"  style="border-bottom: solid; border-width: 1px">Production</h2>
              <p style="color: grey">1 side Offset<br>CMYK print</p>
            </div>

            <div class="col-lg-3 col-md-6 text-center">
              <h2 class="text-uppercase"  style="border-bottom: solid; border-width: 1px">Price</h2>
              <p style="color: grey">25 euros<br>(Plus shipping cost)</p>
            </div>            
           </div>
        </div>
      </div>
    </section>
 


<!-- ============================ POSTAGE ======================================================================= -->

    <section id="postage" class="bg-light">
      <div class="container">

        <div class="row">
          <div class="col-lg-8 text-center">
            <a data-toggle="modal" href="#poster_full"><img src="img/poster/poster_medium.png" style="width:70%"></a>
          </div>
           <div class="col-lg-4 text-center">
            <br><p>The poster will be sent by mail as soon as the payment is received. It comes in a dedicated box. <br><br>I hope you enjoy your print and that it arrives in pristine condition. However, if you are not entirely satisfied, note that its value will be fully reimbursed without any discussion. Contact us by pasting <a href="">yan.holtz.data</a> with <a href="">gmail.com</a>.</p>
          </div>
        </div>

      </div>
    </section>



 

 <!-- ============================ ORDER ======================================================================= -->

 <section id="order" class="" style="padding-bottom: 50px; padding-top: 50px">
     <div class="container">
       <div class="row">
         <div class="col-lg-2 text-center"></div>
         <div class="col-lg-8 text-center">
           <br><br><br>
           <h2 class="section-heading text-uppercase" style="color: black">Order</h2>
           <p>Click the button below to make a fully secure payment using credit card or paypal. For further enquiries, contact us by e-mail, by pasting <a href="">yan.holtz.data</a> with <a href="">gmail.com</a>.</p>

         </div>
       </div>



        <!-- ============================ PAYPAL BUTTON ======================================================================= -->
        <center>
        <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="TG9S5R7WUNEQ6">
        <button class="btn btn-primary btn-xl">GO TO PAYMENT</button>
        </form>
        </center>

        <br>

      </div>
    </section>
 

<!-- ========================================================================= -->












<!-- =================== MODAL SECTION ===================================== -->

    <!-- Poster FULL -->
    <div class="portfolio-modal modal fade" id="poster_full" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog h-100" style="max-width: 100vw;">
        <div class="modal-content"> 
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <img class="img-fluid d-block mx-auto" src="img/poster/poster_big.png" alt="" style="height: 100%; width: 100%">

                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<!-- ======================================================== -->








<!-- ============================ FOOTER SECTION ======================================================================= -->
    <footer class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; from Data to Viz 2018</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

<!-- =================================================================================================== -->





<script>
// ===============================================================================================================================-------- //
// A script to select charts based on their tag //
// ===============================================================================================================================-------- //
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
// ===============================================================================================================================-------- //
</script>













<!-- ============== JAVASCRIPT SECTION ======================== -->



    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
	$(function () {
  		$('[data-toggle="tooltip"]').tooltip()
	})
	</script>


    <!-- Script for animated portfolio with filter. Found here: https://codepen.io/pramodkumarboda/pen/XdgxmQ -->
    <script>
  	$(window).load(function(){
  	    var $container = $('.portfolioContainer');
  	    $container.isotope({
  	        filter: '*',
  	        animationOptions: {
  	            duration: 750,
  	            easing: 'linear',
  	            queue: false
  	        }
  	    });
  	 
  	    $('.portfolioFilter a').click(function(){
  	        $('.portfolioFilter .current').removeClass('current');
  	        $(this).addClass('current');
  	 
  	        var selector = $(this).attr('data-filter');
  	        $container.isotope({
  	            filter: selector,
  	            animationOptions: {
  	                duration: 750,
  	                easing: 'linear',
  	                queue: false
  	            }
  	         });
  	         return false;
  	    }); 
  	});
	</script>




    <!-- Script to give a specific URL to every Modal. TODO: improve it with https://stackoverflow.com/questions/34154370/bootstrap-3-x-how-to-have-url-change-upon-clicking-modal-trigger -->
    <script>
      $(document).ready(function(){
        $(window.location.hash).modal('show');
        $('a[data-toggle="modal"]').click(function(){
           window.location.hash = $(this).attr('href');
        });
      });

      $('button[data-dismiss="modal"]').click(function(){
           var original = window.location.href.substr(0, window.location.href.indexOf('#'))
           history.replaceState({}, document.title, original);
       });

      $(window.location.hash).modal('show');
      $('a[data-toggle="modal"]').click(function(){
          window.location.hash = $(this).attr('href');
      });

      function revertToOriginalURL() {
          var original = window.location.href.substr(0, window.location.href.indexOf('#'))
          history.replaceState({}, document.title, original);
      }

      $('.modal').on('hidden.bs.modal', function () {
          revertToOriginalURL();
      });

  </script>


  <script>
    $('.tip').each(function () {
      $(this).tooltip(
      {
        html: true,
          title: $('#' + $(this).data('tip')).html()
      });
    });
  </script>


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-79254642-3');
</script>










  </body>

</html>
